<template>
  <div class="row justify-center">
    <div class="login-form">
      <div class="title text-h6 text-center">
        <q-item-label>登录</q-item-label>
      </div>
      <div class="mobile row justify-center">
        <q-input
          placeholder="请输入用户名"
          v-model="username"
          style="width: 336px"
        >
          <template v-slot:prepend>
            <q-item-label>用户名</q-item-label>
          </template>
        </q-input>
      </div>
      <div class="yzm row justify-center">
        <q-input
          placeholder="请输入密码"
          v-model="password"
          style="width: 336px"
          :type="isPwd ? 'password' : 'text'"
          v-on:keyup.enter="submit"
        >
          <template v-slot:prepend>
            <q-item-label>密码</q-item-label>
          </template>
          <template v-slot:append>
            <q-icon
              :name="isPwd ? 'visibility_off' : 'visibility'"
              class="cursor-pointer"
              @click="isPwd = !isPwd"
            />
          </template>
        </q-input>
      </div>
      <div class="row justify-center">
        <q-btn
          unelevated
          class="login-btn"
          color="primary"
          label="登 录"
          :disable="!username || !password"
          @click="submit"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "Login",
  data() {
    return {
      username: "superadmin",
      isPwd: true,
      password: "1234567890",
    };
  },
  created() {
    console.info("login->created");

    this.init();
  },
  methods: {
    init() {
      console.info("login->init");
    },

    submit() {
      if (!this.username) {
        this.$q.notify("用户名不能为空！");
        return;
      }

      if (!this.password) {
        this.$q.notify("密码不能为空！");
        return;
      }

      this.$q.loading.show({
        message: "登录中",
      });

      this.$store
        .dispatch("user/login", {
          username: this.username,
          password: this.password,
        })
        .then(async (data) => {
          this.$router.push("/signal");
          this.$q.loading.hide();
        })
        .catch((e) => {
          this.$q.loading.hide();
          console.error(e);
        });
    },
  },
});
</script>
